<template>
	<view class="container">
		<!-- 轮播图 -->
		<swiper class="swiper-container" indicator-dots="true" autoplay="true" interval="3000" duration="500">
			<swiper-item v-for="(item, index) in bannerList" :key="index">
				<image :src="item.image" class="swiper-image"></image>
			</swiper-item>
		</swiper>
		<view class="top">
			<img src="../../static/search.png" alt="" class="search">
			<input type="text" placeholder="搜索">
		</view>
		<view @click="chooseCity"><img src="../../static/location.png" class="locationimg"></view>
		<view class="location">{{local}}</view>
	</view>
	<!-- 区域组件 -->
	<view>
		<view v-for="(item, index) in img" :key="index" class="select">
			<img class="iconimg" :src="item.image">
			<text class="itemname"> {{item.name}}</text>
		</view>
	</view>
	<view>
		<text class="popular"> 今日热门</text>
		<text class="more" @click="toTravel">更多 ></text>
		<view class="travel">
			<view class="traveldisplay" v-for="(item, index) in travel" :key="index" @click="toDetail(item.travelId)">
				<img :src="`${IMG_URL}${item.logo}`" class="travelimg">
				<view class="desc">
					<text>{{item.name}}</text>
					<text>查看详情>></text>
				</view>
			</view>
		</view>
	</view>
	<view>
		<text class="popular"> 景点推荐</text>
		<text class="more">更多 ></text>
		<view class="recommend">
			<view class="recommenddisplay" v-for="(item, index) in recommend" :key="index">
				<img class="recommendimg" :src="item.img">
				<view class="name">
					{{item.title}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		watch,
		computed
	} from 'vue'
	import {
		http
	} from '../../http.js'
	import {
		IMG_URL
	} from "@/utils/imgStatic";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import
	QQMapWX
	from '@/common/qqmap-wx-jssdk.js';
	import {
		userStore
	} from '../../store/userstore.js'
	const store = userStore()
	const local = computed(()=>store.local)
	
	// 轮播图
	const bannerList = reactive([{
			image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.S4obCTJzd3sq-d3BGv7mIQHaE8?rs=1&pid=ImgDetMain'
		},
		{
			image: 'https://youimg1.c-ctrip.com/target/0106c1200064gur4g9E45_D_10000_1200.jpg?proc=autoorient'
		},
		{
			image: 'https://youimg1.c-ctrip.com/target/0101c1200061ynv4356C0_D_10000_1200.jpg?proc=autoorient'
		},
		{
			image: 'https://img-baofun.zhhainiao.com/fs/f3fb975fddfc926997459848d476cbf6.jpg'
		},
		{
			image: 'https://img.shetu66.com/2023/04/26/1682487842359539.png'
		}
	])

	// 组件图标
	const img = reactive([{
			image: '../../static/hotel.png',
			name: '酒店'
		},
		{
			image: '../../static/机票.png',
			name: '机票'
		},
		{
			image: '../../static/火车票.png',
			name: '车票'
		},
		{
			image: '../../static/门票.png',
			name: '门票'
		},
		{
			image: '../../static/攻略-5.png',
			name: '攻略'
		}
	])

	// 景点推荐
	const recommend = reactive([
		{
			img: 'https://img95.699pic.com/photo/60021/4266.jpg_wh860.jpg',
			title: '人文古迹'
		},
		{
			img: 'https://ts1.cn.mm.bing.net/th/id/R-C.4a7cdd1ade6160315bd640982e7b5ca6?rik=IbSEZNwPnvuh5w&riu=http%3a%2f%2fi1.img.969g.com%2fdown%2fimgx2014%2f04%2f02%2f289_091755_d2024.jpg&ehk=SXoZp5ROAUd9p%2bjxTCKJNVzigFE%2bJuKUsIm3ul5ZcP8%3d&risl=&pid=ImgRaw&r=0',
			title: '自然风光'
		},
		{
			img: 'https://pic2.zhimg.com/v2-c35b08571ad074b6f20bd22b286a7a20_r.jpg?source=1940ef5c',
			title: '国外游团'
		},
		{
			img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.uNJPT4Gz0-N3C7JJE2t0CAHaE8?pid=ImgDet&w=474&h=316&rs=1',
			title: '国内旅行'
		},
	])

	const travel = reactive([])

	// 跳转景点页
	const toTravel = () => {
		uni.switchTab({
			url: '/pages/travel/travel'
		})
	}

	// 跳转到景点详情
	const toDetail = async (item) => {
		console.log(item);
		store.detailtravelId = item
		uni.navigateTo({
			url: '/pages/travel/detail'
		})
	}

	// 获取热门
	const formData = reactive({
		pageSize: 5,
		page: 1
	})
	// 获取热门
	const getTravel = async () => {
		const res = await http({
			url: 'http://localhost:3000/travel/getAllTravelByPage',
			method: "GET",
			data: {
				category: '',
				name: '',
				currentPage: formData.page,
				pageSize: formData.pageSize
			}
		})
		if (res.code == 200 && res.msg == 'success') {
			const newlist = res.data.rows;
			if (newlist.length > 0) {
				travel.push(...newlist); // 追加数据  
			} 
		} else {
			console.error('数据请求失败');
		}
	}
	getTravel()
	
	// 城市选择
	const chooseCity = ()=>{
		uni.navigateTo({
			url:"./changecity"
		})
	}

	// 响应式变量  
	const qqmapsdk = ref(null);
	const address = ref('');

	// 初始化地图SDK并调用地图方法  
	onLoad(() => {
		
		// key 从腾讯地图申请  
		qqmapsdk.value = new QQMapWX({
			key: "4JZBZ-S7GCQ-OJB5Q-4JBWF-RDKZQ-DPBNY"
		});
		getAddress();
	});

	// 获取地址方法  
	const getAddress = () => {
		uni.showLoading({
			title: "获取位置中"
		});
		qqmapsdk.value.reverseGeocoder({
			success(res) {
				if (res.status == 0) {
					address.value = res.result.address + res.result.formatted_addresses.recommend;
				}
				console.log(address.value);
				uni.hideLoading();
			},
			fail(err) {
				showLocationWarning(err.message);
				uni.hideLoading();
			},
		});
	};

	// 显示定位警告  
	const showLocationWarning = (msg) => {
		if (msg) {
			if (msg.indexOf('频繁调用') >= 0) {
				uni.showToast({
					title: '请勿频繁定位',
					icon: 'none'
				});
				return;
			}
			if (msg.indexOf('ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF') >= 0) {
				uni.showModal({
					content: '请开启手机定位服务',
					showCancel: false
				});
				return;
			}
		}

		uni.getSetting({
			success(res) {
				if (!res.authSetting["scope.userLocation"]) {
					uni.showModal({
						title: "授权位置信息",
						content: "请确认授权位置信息，否则无法定位",
						success: function(msg) {
							if (msg.confirm) {
								uni.openSetting({
									success: function(e) {
										if (e.authSetting["scope.userLocation"] ===
											true) {
											uni.showToast({
												title: "授权成功",
												icon: "success",
												duration: 1000,
											});
											getAddress();
										} else {
											console.log('无法授权');
										}
									},
								});
							} else if (msg.cancel) {
								uni.showToast({
									title: "授权位置失败",
									icon: "none",
									duration: 1000,
								});
							}
						},
					});
				} else {
					uni.showToast({
						title: "无法获取当前位置",
						icon: "error",
						duration: 5000,
					});
				}
			},
		});
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		position: relative;
	}
	.top {
		position: absolute;
		border-radius: 25px;
		background-color: white;
		opacity: 50%;
		width: 230px;
		height: 30px;
		font-size: 15px;
		display: inline-block;
		top: 10px;
		left: 95px;
	}
	
	.top>input {
		border-radius: 25px;
		background-color: white;
		width: 200px;
		height: 30px;
		font-size: 15px;
		display: inline-block;
	}
	
	.search {
		width: 25px;
		height: 25px;
		display: inline-block;
		margin-bottom: 3px;
	}
	
	.locationimg {
		width: 25px;
		height: 25px;
		position: absolute;
		top:12px;
		left: 10px;
	}
	.location{
		position: absolute;
		top:15px;
		left:37px;
		color: white;
	}

	.swiper-container {
		width: 100%;
		height: 260px;
		/* 可以根据需要调整高度 */
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	.iconimg {
		width: 50px;
		height: 50px;
		display: block;
	}

	.itemname {
		color: darkgray;
		margin-left: 8px;
	}

	.select {
		display: inline-block;
		margin: 20px 15px 25px 13px;
		/* 上右下左 */
	}

	.popular {
		font-weight: bold;
		font-size: 20px;
		margin-left: 10px;
		margin-right: 225px;
	}

	.more {
		font-size: 15px;
		color: darkgray;
	}

	.travel {
		display: flex;
		overflow-x: auto;
		/* 允许水平滚动 */
		white-space: nowrap;
		/* 防止子元素换行 */
		-webkit-overflow-scrolling: touch;
		/* 在移动设备上启用平滑滚动 */
	}

	.traveldisplay {
		flex: 0 0 auto;
		display: inline-block;
		position: relative;
		height: 140px;
		width: 115px;
		border-radius: 15px;
		margin-left: 12px;
		margin-top: 15px;
		margin-bottom: 15px;
	}

	.recommenddisplay {
		flex: 0 0 auto;
		display: inline-block;
		position: relative;
		height: 100px;
		width: 175px;
		margin-left: 12px;
		margin-top: 15px;
		margin-bottom: 15px;
	}

	.travelimg {
		position: absolute;
		height: 100%;
		width: 100%;
		border-radius: 15px;
	}

	.recommendimg {
		position: absolute;
		height: 100%;
		width: 100%;
	}

	.desc {
		position: absolute;
		width: 100%;
		height: 45px;
		border-bottom-left-radius: 15px;
		border-bottom-right-radius: 15px;
		background-color: rgba(0, 0, 0, 0.3);
		bottom: 0;
	}

	.name {
		position: absolute;
		width: 100px;
		height: 55px;
		background-color: rgba(0, 0, 0, 0.2);
		margin: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		border: 1px solid rgba(255, 255, 255, 0.5);
		line-height: 55px;
		text-align: center;
		color: rgba(255, 255, 255, 0.9);
	}

	.desc>text {
		color: white;
		display: block;
		margin-left: 5px;
	}

	.desc>text:nth-child(1) {
		margin-top: 2px;
		font-weight: bold;
		font-size: 15px
	}

	.desc>text:nth-child(2) {
		font-size: 13px;
		padding: 5px;
	}

	
</style>
